<template>
    <div>
        <swiper :options="swiperOption">
                <swiper-slide v-for="(item, index) in ss.items" :key="index">
                   <div class="swp_dv">
                       <img :src="item.photos[0]" alt="">
                       <p class="swp-p1">{{item.name}}</p>
                       <p class="swp-p2">月售{{item.month_sales}}好评率{{item.satisfy_rate}}%</p>
                       <div class="swp-dv2">
                           <span class="swp-span1">¥{{item.specfoods[0].price}}</span>
                           <span class="swp-span2 iconfont">&#xe602;</span>
                       </div>
                       <!-- {{ss.items[0].name}} -->
                   </div>
                </swiper-slide>
                <!-- <div class="swiper-pagination" slot="pagination"></div> -->
            </swiper>
    </div>
</template>
<script>
export default {
    props:{
        'ss':Object
    },
    data(){
        return{
            swiperOption:{
                slidesPerView: 3,
                spaceBetween: 10,
                // centeredSlides:true
                freeMode:true
            }
        }
    }
}
</script>
<style lang="stylus" scoped>

            .swp_dv
                flex none
                width 32vw
                // margin-right 23.666667vw
                padding-bottom 4.266667vw
            .swp_dv:first-child
                margin-left: 2.666667vw;
            .swp_dv:last-child
               margin-right: 10rem;
            .swp_dv
                img
                    display block
                    width 32vw
                    height 32vw
                    border 1px solid #f5f5f5
                .swp-p1
                    color #000
                    font-size .3rem
                    margin 1.866667vw 0 .933333vw
                    white-space nowrap
                    text-overflow ellipsis
                    overflow hidden
                .swp-p2
                    color #999
                    font-size .266667rem
                    margin-bottom 1.866667vw
                .swp-dv2
                    display flex
                    align-items center
                    justify-content space-between
                    padding-right .266667vw
                    
                    .swp-span1
                        font-size .48rem
                        color #ff5339
                    .swp-span2
                        font-size .5rem
                        color #2396ff
                        display inline-block
                        background-color #fff
</style>
